<template>
  <div class="sales-index">
    <div class="page-header">
      <h1>销售管理</h1>
      <p>管理销售相关的所有业务功能</p>
    </div>
    
    <div class="module-grid">
      <div class="module-card" @click="$router.push('/sales/customers')">
        <div class="card-icon">
          <i class="el-icon-user"></i>
        </div>
        <div class="card-content">
          <h3>客户管理</h3>
          <p>管理客户信息、联系方式、信用等级等</p>
        </div>
      </div>
      
      <div class="module-card" @click="$router.push('/sales/orders')">
        <div class="card-icon">
          <i class="el-icon-document"></i>
        </div>
        <div class="card-content">
          <h3>订单管理</h3>
          <p>管理销售订单、订单状态、订单跟踪等</p>
        </div>
      </div>
      
      <div class="module-card" @click="$router.push('/sales/attachments')">
        <div class="card-icon">
          <i class="el-icon-folder"></i>
        </div>
        <div class="card-content">
          <h3>附件管理</h3>
          <p>管理销售订单相关的合同、发票、送货单等附件</p>
        </div>
      </div>
      
      <div class="module-card" @click="$router.push('/sales/return')">
        <div class="card-icon">
          <i class="el-icon-refresh-left"></i>
        </div>
        <div class="card-content">
          <h3>订单退货</h3>
          <p>管理销售订单的退货申请、审核和处理流程</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.sales-index {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 32px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 16px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.module-card {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.card-icon {
  text-align: center;
  margin-bottom: 20px;
}

.card-icon i {
  font-size: 48px;
  color: #409eff;
}

.card-content h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.card-content p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    padding: 30px 20px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
}
</style>


